.wrap{
    position: relative;
    width: 800px;
    height:400px;
}
.list{
    padding-left:0px;
    position: relative;
    list-style: none;
    width: 800px;
    height: 400px;
}
.pointList{
    position: absolute;
    list-style: none;
    right:330px;
    bottom: 0px;
    z-index: 1000;
}
.point{
    width:9px;
    height: 8px;
    background-color:rgba(0,0,0,0.4);
    list-style: none;
    float: left;
    margin-left: 14px;
    border-radius: 100%;
    border:2px solid rgba(255, 255,255, 0.6);
    cursor: pointer;
}
.item{
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all .5s;
}
.item:nth-child(1){
    background-image: url(../img/1.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.item:nth-child(2){
    background-image: url(../img/2.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.item:nth-child(3){
    background-image: url(../img/3.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.item:nth-child(4){
    background-image: url(../img/4.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.item:nth-child(5){
    background-image: url(../img/5.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.btn{
    position: absolute;
    width: 50px;
    height: 100px;
    top: 150px;
    cursor: pointer;
    z-index: 100;
}
#goPre{
    left:0px;
}
#goNext{
    right:0px;
}
.item.active{
    opacity: 1;
    z-index: 10;
}
.point.active{
    background-color: rgba(255,255,255,0.4);
}